<template>
	<view class="page">
		<view class="header">
			<yzh-header :title="title" :bgColor="'#609299'"></yzh-header>
			<!-- #ifdef MP-WEIXIN -->
			<image src="@/static/yzh/tower.jpg"></image>
			<!-- #endif -->
		</view>
		<view class="body">
			<view class="info">
				<uni-card>
					<view class="content">
						<u--form v-model="shopInfo" :model="shopInfo" ref="form1">
							<u-form-item label="负责人" prop="person" :labelWidth="120">
								<u--input placeholder="请输入名称" border="surround" clearable
									v-model="shopInfo.person"></u--input>
							</u-form-item>
							<u-form-item label="身份证号码" prop="idCard" :labelWidth="120">
								<u--input placeholder="请输入身份证号" border="surround" clearable
									v-model="shopInfo.idCard"></u--input>
							</u-form-item>
							<u-form-item label="手机号" prop="phone" :labelWidth="120">
								<u--input placeholder="请输入手机号" border="surround" clearable
									v-model="shopInfo.phone"></u--input>
							</u-form-item>
							<u-form-item label="验证码" prop="code" :labelWidth="120">
								<!-- #ifndef APP-NVUE -->
								<u-input placeholder="请输入验证码" v-model="shopInfo.code" clearable="">
								<!-- #endif -->
									<!-- #ifdef APP-NVUE -->
									<u--input placeholder="请输入验证码" border="surround" v-model="shopInfo.code" clearable>
									<!-- #endif -->
										<template slot="suffix">
											<u-code ref="uCode" changeText="X秒重新获取"></u-code>
											<u-button type="primary" size="mini" text="获取验证码"></u-button>
										</template>
								<!-- #ifndef APP-NVUE -->
								</u-input>
								<!-- #endif -->
								<!-- #ifdef APP-NVUE -->
								</u--input>
								<!-- #endif -->
							</u-form-item>
							<u-form-item label="店名" prop="name" :labelWidth="120">
								<u--input placeholder="请输入店名" border="surround" clearable
									v-model="shopInfo.name"></u--input>
							</u-form-item>
							<u-form-item label="工商营业执照号码" prop="permission" :labelWidth="120">
								<u--input placeholder="请输入工商营业执照号码" border="surround" clearable
									v-model="shopInfo.permission"></u--input>
							</u-form-item>
							<u-form-item label="经营区域" prop="area" :labelWidth="120">
								<view class="region">
									<picker mode="region" :value="region" @change="onChangeRegion">
										<u--input placeholder="请选择经营区域" border="surround" :disabled="true"
											v-model="shopInfo.area"></u--input>
									</picker>
								</view>
							</u-form-item>
							<u-form-item label="地址" prop="address" :labelWidth="120">
								<u--input placeholder="请输入地址" border="surround" clearable
									v-model="shopInfo.address"></u--input>
							</u-form-item>
						</u--form>
					</view>
				</uni-card>
			</view>
			<view class="intro">
				<uni-card title="商家简介">
					<view class="content">
						<u--form v-model="shopInfo" :model="shopInfo" ref="form2">
							<u-form-item prop="intro">
								<u--textarea placeholder="请输入简介" v-model="shopInfo.intro"></u--textarea>
							</u-form-item>
						</u--form>
					</view>
				</uni-card>
			</view>
			<view class="idCard">
				<uni-card title="身份证正反面照片">
					<view class="content">
						<u--form v-model="shopInfo" :model="shopInfo" ref="form3">
							<u-form-item prop="idCardPhoto">
								<u-upload :fileList="idCardImageList" @afterRead="ARIdCardImage"
									@delete="deleteIdCardImage" multiple :maxCount="2"
									:previewFullImage="true"></u-upload>
							</u-form-item>
						</u--form>
					</view>
				</uni-card>
			</view>
			<view class="permission">
				<uni-card title="营业执照">
					<view class="content">
						<u--form v-model="shopInfo" :model="shopInfo" ref="form4">
							<u-form-item prop="perPhoto">
								<u-upload :fileList="perImageList" @afterRead="ARPerImage" @delete="deletePerImage"
									:maxCount="1" :previewFullImage="true"></u-upload>
							</u-form-item>
						</u--form>
					</view>
				</uni-card>
			</view>
			<view class="shopPhoto">
				<uni-card title="门店照片">
					<view class="content">
						<u--form v-model="shopInfo" :model="shopInfo" ref="form5">
							<u-form-item prop="shopPhoto">
								<u-upload :fileList="shopImageList" @afterRead="ARShopImage" @delete="deleteShopImage"
									:maxCount="1" :previewFullImage="true"></u-upload>
							</u-form-item>
						</u--form>
					</view>
				</uni-card>
			</view>
		</view>
		<view class="btn">
			<u-button type="primary" text="修改" @click="confirm()"></u-button>
		</view>
	</view>
</template>

<script>
	import Header from "@/components/Header/Header.vue";
	import list from "../../../uni_modules/uview-ui/libs/config/props/list";
	export default {
		components: {
			'yzh-header': Header
		},
		data() {
			return {
				title: "商家注册",
				region: "",
				shopInfo: {
					person: "",
					idCard: "",
					phone: "",
					code: "",
					name: "",
					permission: "",
					area: "",
					address: "",
					intro: "",
					idCardPhoto: {
						front: "",
						behind: ""
					},
					perPhoto: "",
					shopPhoto: ""
				},
				idCardImageList: [],
				perImageList: null,
				shopImageList: null,
				rules1: {
					person: [{
						type: "string",
						required: true,
						message: "请输入负责人",
						trigger: ["blur", "change"]
					}],
					idCard: [{
						type: "string",
						required: true,
						message: "请输入身份证号码",
						trigger: ["blur", "change"]
					}],
					phone: [{
						type: "number",
						required: true,
						message: "请输入手机号",
						trigger: ["blur", "change"]
					}],
					code: [{
						type: "string",
						required: true,
						message: "请输入验证码",
						trigger: ["blur", "change"]
					}],
					name: [{
						type: "string",
						required: true,
						message: "请输入店名",
						trigger: ["blur", "change"]
					}],
					permission: [{
						type: "string",
						required: true,
						message: "请输入工商营业执照号码",
						trigger: ["blur", "change"]
					}],
					area: [{
						required: true,
						message: "请选择营业区域",
						trigger: ["blur", "change"]
					}],
					address: [{
						type: "string",
						required: true,
						message: "请输入地址",
						trigger: ["blur", "change"]
					}]
				},
				rules2: {
					intro: [{
						type: "string",
						required: true,
						message: "请输入简介",
						trigger: ["blur", "change"]
					}]
				},
				rules3: {
					idCardPhoto: [{
						required: true,
						message: "请上传身份证正反面图片",
						trigger: ["blur", "change"]
					}]
				},
				rules4: {
					perPhoto: [{
						required: true,
						message: "请上传工商营业执照图片",
						trigger: ["blur", "change"]
					}]
				},
				rules5: {
					shopPhoto: [{
						required: true,
						message: "请上传店面图片",
						trigger: ["blur", "change"]
					}]
				}
			}
		},
		methods: {
			deleteShopImage() {
				this.shopImageList = null;
			},
			ARShopImage() {

			},
			deletePerImage() {
				this.perImageList = null;
			},
			ARPerImage() {

			},
			deleteIdCardImage(event) {
				this.idCardImageList.splice(event.index, 1)
			},
			ARIdCardImage(file) {},
			confirm() {
				this.$refs.form1.validate().then(res => {
					this.$refs.form2.validate().then(res => {
						this.$refs.form3.validate().then(res => {
							this.$refs.form4.validate().then(res => {
								this.$refs.form5.validate().then(res => {
									console.log("表单验证成功");
									console.log(this.shopInfo)
								}).catch(err => {
									console.log('表单验证失败', err);
								});
							}).catch(err => {
								console.log('表单验证失败', err);
							});
						}).catch(err => {
							console.log('表单验证失败', err);
						});
					}).catch(err => {
						console.log('表单验证失败', err);
					});
				}).catch(err => {
					console.log('表单验证失败', err);
				});
			},
			onChangeRegion(e) {
				this.shopInfo.area = e.detail.value.join("");
			}
		},
		onLoad(options) {
			if (options.shopInfo) {
				this.shopInfo = JSON.parse(decodeURIComponent(options.shopInfo));
				this.title = "商家修改";
				this.idCardImageList = [{
					url: this.shopInfo.idCardPhoto.front,
					name: "idCardImageFront"
				}, {
					url: this.shopInfo.idCardPhoto.behind,
					name: "idCardImageBehind"
				}];
				this.perImageList = {
					url: this.shopInfo.perPhoto,
					name: "perImage"
				}
				this.shopImageList = {
					url: this.shopInfo.shopPhoto,
					name: "shopImage"
				};
			}
			console.log(this.shopInfo)
			this.$refs.form1.setRules(this.rules1);
			this.$refs.form2.setRules(this.rules2);
			this.$refs.form3.setRules(this.rules3);
			this.$refs.form4.setRules(this.rules4);
			this.$refs.form5.setRules(this.rules5);
		}
	}
</script>

<style scoped>
	.page {
		/* #ifndef MP-WEIXIN */
		background-image: url('@/static/yzh/tower.jpg');
		background-size: cover;
		background-position: contain;
		background-repeat: no-repeat;
		height: 140vh;
		/* #endif */
	}

	.header {}

	.header>image {
		width: 100%;
		height: 160%;
		position: absolute;
		z-index: -1;
		object-fit: fill;
	}

	.body {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		width: 100%;
		margin: 0 auto;
		margin-top: 140rpx;
	}

	.info .content>view {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.info .content>view>text:nth-child(1) {
		width: 40%;
	}

	.idCard,
	.intro,
	.permission,
	.shopPhoto {
		margin-top: -50rpx;
	}

	.idCard .content {
		display: flex;
	}

	.idCard .content>image:nth-child(2) {
		margin-left: 20rpx;
	}

	.idCard .content>image,
	.permission .content>image,
	.shopPhoto .content>image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 20rpx;
		border: 2rpx solid red;
	}

	.region {
		width: 100%;
		height: 100%;
	}
</style>